import React, { Component } from 'react'
import { Link, Route, Switch, NavLink } from 'react-router-dom'

import Detail from './components/Detail'
import My from './components/My'


export default class Home extends Component {
    render() {
        return (
            <div>
                <div>
                    {/* <Link to="/home">首页</Link> ---  
                    <Link to="/home/my">我的</Link> */}

                    {/* activeClassName activeStyle */}

                    <NavLink activeStyle = {{
                        color: 'skyblue'
                    }} exact to="/home">首页</NavLink> ---  
                    <NavLink activeStyle = {{
                        color: 'skyblue'
                    }} exact to="/home/my">我的</NavLink>
                </div>

                <div>
                    {/* component */}
                    <Switch>
                        <Route path="/home/my" component = { My } />
                        <Route path="/home" component = { Detail }/>
                    </Switch>
                    

                    {/* render */}
                    {/* <Route path="/detail"  render = { () => {
                        return <React.Fragment>
                            <h2>面包屑</h2>
                            <Detail/>
                        </React.Fragment>
                    }}/>

                    <Route path="/my"  render = { () => {
                        return <My/>
                    }}/> */}

                    {/* children */}
                    {/* <Route path="/detail">
                        <h3>111111</h3>
                        <Detail/>
                    </Route>
                    <Route path="/my">
                        <My/>
                    </Route> */}
                </div>

                {/* <Route/> 展示视图的方式有三种方式 */}
                {/* 1. component */}
                {/* 2. render */}
                {/* 3. children */}
            </div>
        )
    }
}
